<template>
	<view class="card-header">
		<text class="myIcon text-olive margin-right-xs" :class="icon"></text>
		<!-- <image src="/static/temp/h1.png"></image> --> 
		<view class="tit-box">
			<text class="tit">{{title}}</text>
			<text class="tit2 text-Abc">{{title2}}</text>
		</view>
		<text  v-if="isright" class="cuIcon-right" @click="goTo"></text>
	</view>
</template>

<script>
export default {
	components: {},
	data() {
		return {
			isCard: false
		};
	},
	computed: {	},
	methods: {
		goTo: function(e) {
			if(this.url)	this.$util.goTo(url);
		} 
	},
	props: {
		icon: {
			type: String, 
			default:"cuIcon-evaluate_fill" 
		},
		title: { 
			type: String, 
			default:"热门推荐" 
		},
		title2: { 
			type: String, 
			default:"hot recommend" 
		},
		url: { 
			type: String, 
			default:"" 
		},
		isright: {
			type: Boolean, 
			default:true
		}
	}
};
</script>

<style lang="scss">
.card-header { 
	display: flex;
	align-items: center;
	height: 140upx;
	padding: 3upx $uni-spacing-col-lg 8upx;
	background: #fff;
	image {
		flex-shrink: 0;
		width: 80upx;
		height: 80upx;
		margin-right: 20upx;
	}
	.myIcon {
		font-size: $uni-img-size-lg;
	}
	.tit-box {
		flex: 1;
		display: flex;
		flex-direction: column;
	}
	.tit {
		font-size: $uni-font-size-lg + 2upx;
		color: $uni-text-color;
		line-height: 1.3;
	}
	.tit2 {
		font-size: $uni-font-size-sm;
		color: $uni-text-color-grey;
	}
	.cuIcon-right {
		font-size: $uni-font-size-lg + 2upx;
		color: $uni-text-color-grey;
	}
}

</style>
